<template>
  <div style="background-color: white;">
    <h1 style="text-align: center;">订单管理</h1>
    <button @click="addOrder">新增订单</button>
    <!-- 跳转到新增订单页面按钮 -->
    <!-- <router-link to="/order/add">新增订单</router-link> -->
    <table style="border-collapse: separate; border-spacing:10px 70px;">
      <thead>
        <tr>
          <th>订单编号</th>
          <th>订单用户</th>
          <th>订单时间</th>
          <th>订单金额</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(order, index) in orders" :key="order.id" style="text-align: center;">
          <td>{{ order.orderNo }}</td>
          <td>{{ order.orderName }}</td>
          <td>{{ order.orderTime }}</td>
          <td>{{ order.orderAmount }}</td>
          <td>
            <button @click="editOrder(index)">编辑</button>
            <button @click="deleteOrder(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <div v-if="editingOrder">
      <h2>{{ editingOrderIndex === null ? '新增订单' : '编辑订单' }}</h2>
      <form @submit.prevent="saveOrder">
        <label for="orderNo">订单编号</label>
        <input type="text" v-model="editingOrder.orderNo" required />
        <label for="orderName">订单用户</label>
        <input type="text" v-model="editingOrder.orderName" required />
        <label for="orderTime">订单时间</label>
        <input type="datetime-local" v-model="editingOrder.orderTime" required />
        <label for="orderAmount">订单金额</label>
        <input type="number" v-model="editingOrder.orderAmount" required />
        <button type="submit">{{ editingOrderIndex === null ? '新增' : '保存' }}</button>
        <button type="button" @click="cancelEdit">取消</button>
      </form>
    </div>
  </div>
</template>
  
<script>
import { order } from '@/main';
export default {
  data() {
    return {
      orders: [
        { id: 1, orderNo: '001', orderName: '张三', orderTime: '2023-04-25T10:00', orderAmount: 100 },
        { id: 2, orderNo: '002', orderName: '张四', orderTime: '2023-04-24T15:30', orderAmount: 200 },
        { id: 3, orderNo: '003', orderName: '张五', orderTime: '2023-04-23T18:45', orderAmount: 150 }
      ],
      editingOrderIndex: null,
      editingOrder: null
    };
  },
  methods: {
    addOrder() {
      // this.editingOrderIndex = null;
      // this.editingOrder = { orderNo: '', orderName: '', orderTime: '', orderAmount: '' };
      order.$bus.$emit('ordersAdd', this.orders);
      this.$router.push({ path: '/OrdersAdd' });
    },
    editOrder(index) {
      this.editingOrderIndex = index;
      this.editingOrder = { ...this.orders[index] };
    },
    deleteOrder(index) {
      this.orders.splice(index, 1);
    },
    saveOrder() {
      if (this.editingOrderIndex === null) {
        // 新增订单
        this.editingOrder.id = this.orders.length + 1;
        this.orders.push(this.editingOrder);
      } else {
        // 编辑订单
        this.orders.splice(this.editingOrderIndex, 1, this.editingOrder);
      }
      this.cancelEdit();
    },
    cancelEdit() {
      this.editingOrderIndex = null;
      this.editingOrder = null;
    }
  }
};
</script>
  
<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
</style>